<script setup>
import { getOrderDataFn } from '@/api/wzhApi';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
function backClick() {
    router.back()
}
const route = useRoute()
const data = route.query.data
// console.log("跳转后的数据", data);
const order = ref({
    userid: '',
    orderNum: '',
    bgTime: '',
    endTime: '',
    payTime: '',
    payMode: '',
    orderMoney: '',
    shipper: {
        name: '',
        tel: '',
        address: ''
    },
    receiver: {
        name: '',
        tel: '',
        address: ''
    },
    cargoInformation: {
        type: '',
        weight: '',
        packingMethod: '',
        size: ''
    },
    carInformation: {
        carNumber: '',
        length: '',
        type: '',
        transportationType: ''
    },
    transportationMoney: '',
    otherNeed: '',
    remark: '',
    orderState: ''
})
onMounted(() => {
    getOrderDataFn({ orderNum: data }).then(res => {
        console.log(res.data.order);
        order.value = res.data.order
    })
})

</script>
<template>
    <div class="container">
        <header class="header">
            <span class="left" @click="backClick"> &lt; </span>
            <span>订单详情</span>
        </header>

        <div class="content">

            <div class="address" style="border-radius: 0.2rem;">
                <div class="u1707">
                    <div class="u1702">装</div>
                    <img class="u1704" src="/imgs//u1704.svg" alt="">
                    <div class="u1703">卸</div>
                </div>
                <div class="u1708">
                    <div class="u1709">
                        <div class="u1710"><span>发货人：{{ order.shipper.name }}</span><span>{{ order.shipper.tel }}</span>
                        </div>
                        <div class="u1711">{{ order.shipper.address }}</div>
                    </div>
                    <div class="u1709" style="margin-bottom: 0;">
                        <div class="u1710"><span>收货人：{{ order.receiver.name }}</span><span>{{ order.receiver.tel
                                }}</span>
                        </div>
                        <div class="u1711">{{ order.receiver.address }}</div>
                    </div>
                </div>
            </div>

            <div class="u1712" style=" border-radius: 0.2rem;">
                <div class="u1713">
                    <div>
                        <img src="/imgs/u1713.svg" alt="">
                        <div style="font-size: 14px; color: #999;">货物信息</div>
                    </div>
                </div>
                <div class="u1714">
                    <div class="u1715" style="border-bottom:1px solid rgba(242, 242, 242, 1) ;">
                        {{ order.cargoInformation.type }}/ {{ order.cargoInformation.packingMethod }}
                    </div>
                    <div class="u1715">
                        重货/ {{ order.cargoInformation.weight }}/ {{ order.cargoInformation.size }}
                    </div>
                </div>
            </div>

            <div class="u1716" style=" border-radius: 0.2rem;">
                <div class="u1717" style="border-bottom:1px solid rgba(242, 242, 242, 1) ;">
                    <span class="u1718">用车需求</span><span>{{ order.carInformation.length }}/
                        {{ order.carInformation.type }}</span>
                </div>
                <div class="u1717">
                    <span class="u1718">运输类型</span>
                    <span>{{ order.carInformation.transportationType }}</span>
                </div>
            </div>

            <div class="u1716" style="margin:20px 0;border-radius: 0.2rem;">
                <div class="u1717" style="border-bottom:1px solid rgba(242, 242, 242, 1) ;">
                    <span class="u1718">运输费用</span><span>{{ order.transportationMoney }} 元</span>
                </div>
                <div class="u1717">
                    <span class="u1718">支付方式</span>
                    <span>{{ order.payMoney }}</span>
                </div>
            </div>

            <div class="u1716" style="margin-bottom:20px;border-radius: 0.2rem;">
                <div class="u1717" style="border-bottom:1px solid rgba(242, 242, 242, 1) ;">
                    <span class="u1718">其他需要</span><span>{{ order.otherNeed }}</span>
                </div>
                <div class="u1717">
                    <span class="u1718">备注（选填）</span>
                    <span>{{ order.remark }}</span>
                </div>
            </div>
        </div>
        <div class="order-money">
            <van-cell title="订单金额" style=" border-radius: 0.2rem;">
                <template #value>
                    <span style="color: red;">{{ order.orderMoney }} 元</span>
                </template>
            </van-cell>
        </div>

        <div class="order-item">
            <van-cell-group>
                <van-cell title="订单编号">
                    <template #value>
                        <span>{{ order.orderNum }}</span>
                    </template>
                    <template #right-icon>
                        <van-button round color="gray" size="mini">复制</van-button>
                    </template>
                </van-cell>
                <van-cell title="装车时间">
                    <template #value>
                        <span>{{ order.bgTime }}</span>
                    </template>
                </van-cell>
                <van-cell title="卸货时间">
                    <template #value>
                        <span>{{ order.endTime }}</span>
                    </template>
                </van-cell>
                <van-cell title="支付方式">
                    <template #value>
                        <span>{{ order.payMode }}</span>
                    </template>
                </van-cell>
                <van-cell title="付款时间">
                    <template #value>
                        <span>{{ order.payTime }}</span>
                    </template>
                </van-cell>
            </van-cell-group>

        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: rgba(242, 242, 242, 1);
    overflow: auto;

    .content {
        height: calc(100% - 0.6rem);
        overflow: auto;
    }
}

.header {
    height: 0.6rem;
    background-color: #1678ff;
    line-height: 0.6rem;
    text-align: center;
    font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 18px;
    color: #FFFFFF;

    .left {
        position: absolute;
        left: 12px;
        font-size: 26px;
    }
}



.u1716 {
    height: 89px;
    background-color: white;
    font-size: 14px;
    padding-left: 20px;

    .u1717 {
        height: 44px;
        width: 100%;
        padding-right: 20px;
        line-height: 44px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .u1718 {
            color: #999;
        }
    }
}

.u1712 {
    margin: 20px 0;
    height: 89px;
    display: flex;
    background-color: white;

    .u1713 {
        height: 89px;
        width: 89px;
        border-right: 1px solid rgba(242, 242, 242, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        img {
            position: relative;
            left: 18px;
        }
    }

    .u1714 {
        flex: 1;
        font-size: 14px;

        .u1715 {
            height: 44px;
            width: 100%;
            text-align: right;
            padding-right: 20px;
            line-height: 44px;
            box-sizing: border-box;
        }
    }
}


.u1705 {
    margin: 0 auto;
    width: 90%;
}

.u1706 {
    margin: 0 auto;
    width: 90%;
    text-align: center;
    font-size: 12px;
    color: #FEB028;
    background-color: rgba(242, 242, 242, 1);
    width: 100px;
    position: relative;
    top: -12px
}

.address {
    width: 100%;
    background-color: white;
    display: flex;

}

.u1707 {
    padding: 10px 20px;

    .u1702 {
        width: 20px;
        height: 20px;
        color: #70B603;
        font-size: 12px;
        border-radius: 50%;
        border: 1px solid #70B603;
        text-align: center;
        line-height: 20px;
    }

    .u1704 {
        position: relative;
        left: 10px;
    }

    .u1703 {
        width: 20px;
        height: 20px;
        color: #FF5257;
        font-size: 12px;
        border-radius: 50%;
        border: 1px solid #FF5257;
        text-align: center;
        line-height: 20px;
    }

}

.u1708 {
    padding-right: 20px;
    flex: 1;

    .u1709 {
        margin: 10px 0;
        height: 63px;
        border-bottom: 1px solid rgba(242, 242, 242, 1);


        .u1710 {
            width: 100%;
            font-size: 14px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
        }

        .u1711 {
            margin: 10px 0;
            font-size: 12px;
            color: #999;
        }

    }
}

.order-item {
    position: relative;

}

.order-item,
.order-money,
.content {
    width: 90%;
    margin: 0.1rem 5% 0 5%;
}

::v-deep .order-item .van-cell__value {
    left: -0.5rem;
    text-align: left;
}
</style>